<template id="recommend">
    <div class="x_recommend">
       <!-- <v-head></v-head>-->
        <div id="recom_con">
        <v-banner></v-banner>
       <div class="banner_bottom">
           <ul class="ul_list">
               <li><span class="sp"><img src="../image/green_m.png" alt=""></span><span class="span_1">严选</span></li>
               <li><span class="sp"><img src="../image/green_m.png" alt=""></span><span class="span_1">专业检测</span></li>
               <li><span class="sp"><img src="../image/green_m.png" alt=""></span><span class="span_1">48小时</span></li>
           </ul>
       </div>
            <div class="bao_tian">
                <span class="s_tian">天天快报</span>
            <swiper :options="swiperOption" ref="mySwiper" id="swiper_com">
                <swiper-slide class="swiper_rec" v-for="p in tag4_ad">
                     <span class="s_xin">{{p.title}}</span>
                </swiper-slide>
            </swiper>
            </div>
     <!--   <div class="tian">
            <span class="s_tian">天天快报</span>
            <span class="s_xin">【新品上市】南非葡萄柚全面上新啦～</span>
        </div>-->
        <v-buy></v-buy>
        <v-newp></v-newp>
        <v-select></v-select>
        <v-choose></v-choose>
        <v-strawberry></v-strawberry>
        </div>
        <!--<v-footer></v-footer>-->
    </div>
</template>
<script>
  /*  import head from './head.vue'*/
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import buy from './buy.vue'
    import newp from './newp.vue'
    import Selected from './Selected.vue'
    import choose from './choose.vue'
    import strawberry from './strawberry.vue'
    import banner from './banner.vue'


    export default {
        name:'recommend',
        data(){
            return{
                swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    // swiper configs 所有的配置同swiper官方api配置
                    autoplay: 2000,
                    direction: 'vertical',
                    grabCursor : true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    mousewheelControl : true,
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,
                    loop: true,
                },
                tag4_ad:[],
            }
        },
        components:{
           'v-buy':buy,
            'v-newp':newp,
            'v-select':Selected,
            'v-choose':choose,
            'v-strawberry':strawberry,
            'v-banner':banner,
        },
        mounted:function(){
            let H = $(window).height()-90
            $('#recom_con').height(H)
         /*   console.log(this.GLOBAL.getCookie('uid') + ' | ' + this.GLOBAL.getCookie('time') + ' | ' + this.GLOBAL.getCookie('token'));*/
            let mode4 = 'news';
            this.GLOBAL.getList(this,mode4,5);
            //分享载入
           if(init.isWeiXin()){
                share.share_wx();
                share.type ='index';
                share.share();
                share.share_guest();
            }
        },
        methods:{
        }
    }
</script>
<style>
    .bao_tian{
        width:100%;
        height:0.7rem;
        position:relative;
    }
   /* #recom_con{
        overflow-y: scroll;
    }*/
    /*11111*/
    .x_recommend{
        overflow-x:hidden;
        /*overflow-y:hidden;
        -webkit-overflow-scrolling: touch;*/
    }
    *{
        margin:0;
        padding:0;
    }
.banner_bottom{
    height:48px;
    width:100%;
    border-bottom: 0.01rem solid #eaeaea;
}
    .ul_list{
        margin:0;
        padding:0;
        height:48px;
        width:100%;
        display:flex;
    }
.ul_list li{
    display:inline-block;
    height:48px;
    list-style:none;
    flex:1;
    padding-left:25px;
}
.sp{
    position:relative;
}
    .sp img{
        position:absolute;
        top: 0.2rem;
        height:0.34rem;
        width: 0.34rem;
    }
    .span_1{
        font-size: 0.24rem;
        color:#333;
        float:left;
        line-height:48px;
        margin-left:30px;
    }
   #swiper_com .swiper_rec{
        height:0.7rem;
        width:100%;
        font-size:0.26rem;
        line-height:0.7rem;
        text-align:center;
        font-weight:700;
       /* border-bottom:10px solid #f5f4f2;*/
        background:#ffffff;
    }
    #swiper_com{
        height:0.7rem;
        width:100%;
        border-bottom:10px solid #f5f4f2;

    }
    .tian{
        height:0.8rem;
        width:100%;
        font-size:0.26rem;
        line-height:0.8rem;
        text-align:center;
        font-weight:700;
        border-bottom:10px solid #f5f4f2;
        background:#ffffff;
    }
    .s_tian{
        color: #8eb05d;
        border-right: 1px solid #d5d5d5;
        padding-right: 10px;
        position: absolute;
        top: 0.18rem;
        left: 0.45rem;
        font-size: 0.26rem;
        /* line-height: 0.7rem; */
        text-align: center;
        font-weight: 700;
       /* margin-left: 0.2rem;*/
        z-index: 10;
    }
    .s_xin{
        color:#646464;
        overflow: hidden; /*!*自动隐藏文字*!*/
        text-overflow: ellipsis;/*!*文字隐藏后添加省略号*!*/
        white-space: nowrap;/*!*强制不换行*!*/
        display:inline-block;
        width:4rem;
        margin-left:1.2rem;
    }
</style>
